<template>
  <div>
    <div class="search-head">
      <van-icon
        name="arrow-left"
        color="white"
        size="18"
        @click="$router.back()"
      />
      <van-search
        v-model="addressValue"
        background="transparent"
        placeholder="请输入小区或地址"
      >
        <template #label>
          <label for="" @click="$router.push('/city')"
            >{{ cname }}&nbsp;<van-icon name="arrow-down"
          /></label>
        </template>
      </van-search>
      <van-icon
        name="location-o"
        size="25"
        @click="$router.push('/map')"
        class="icon-local"
      />
    </div>
    <van-overlay :show="show" @click="show = false" z-index="2"  >
      <template #default >
        <div class="over-con">
          <van-picker title="" show-tollbar="false">
            <template #confirm>
              <div style="background:white"></div>
            </template>
            <template #cancel>
              <div style="background:white"></div>
            </template>
            <template #columns-bottom>
              <div class="mask-bottom">
                <button class="cancel">取消</button>
                <button class="confirm">确认</button>
              </div>
            </template>
          </van-picker>
        </div>
      </template>
    </van-overlay>
    <div class="filter-label" ref="label">
      <van-grid direction="horizontal" :border="false">
        <van-grid-item @click="show = true">
          <template #default>
            <span>区域</span>
            <van-icon name="arrow-down" />
          </template>
        </van-grid-item>

        <van-grid-item>
          <template #default>
            <span>方式</span>
            <van-icon name="arrow-down" />
          </template>
        </van-grid-item>

        <van-grid-item>
          <template #default>
            <span>租金</span>
            <van-icon name="arrow-down" />
          </template>
        </van-grid-item>

        <van-grid-item>
          <template #default>
            <span>筛选</span>
            <van-icon name="arrow-down" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="houselist">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in houseList" :key="index">
          <template #default>
            <div class="singlehouse">
              <div class="houseimg">
                <img
                  :src="'http://liufusong.top:8080' + item.houseImg"
                  alt=""
                />
              </div>
              <div class="houseinfo">
                <h3>{{ item.title }}</h3>
                <p>{{ item.desc }}</p>
                <span class="hao">近地铁</span>
                <div class="price">
                  <span>{{ item.price }}</span
                  >&nbsp;元/月
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
    <div class="ceshi" style="height: 1000px"></div>
  </div>
</template>

<script>
import { getCityInfo } from '@/api/city'
import { getHouses } from '@/api/search'
export default {
  name: 'search-page',
  data() {
    return {
      show: false,
      addressValue: '',
      cname: localStorage.getItem('cname') || '北京',
      houseList: [],
      loading: false,
      finished: false,
      cityId: ''
    }
  },
  async created() {
    // 获取城市信息 得到城市id
    const res = await getCityInfo(this.cname)
    // console.log(value)
    this.cityId = res.body.value
    // 通过发送城市id来获取当前城市房子信息
    const house = await getHouses(this.cityId)
    console.log(house)
    this.houseList = house.body.list
    console.log(this.houseList)
  },
  mounted() {
    this.$nextTick(() => {
      // 监听这个dom的scroll事件
      window.addEventListener('scroll', this.handleScroll)
    })
  },
  methods: {
    handleScroll() {
      console.log(document.querySelector('.filter-label').getBoundingClientRect().top)
      console.log(document.querySelector('.filter-label').offsetTop)
      if (document.documentElement.scrollTop > 50) {
        // this.$refs.label.setAttribute('style', 'position:fixed,top:0,left:0,width:100%')
        document.querySelector('.filter-label').style.position = 'fixed'
        document.querySelector('.filter-label').style.top = '0'
        document.querySelector('.filter-label').style.left = '0'
        document.querySelector('.over-con').style.top = '30'
        // // document.querySelector('.filter-label').style.width = '100%'
      } else if (document.documentElement.scrollTop < 50) {
        document.querySelector('.filter-label').style.position = 'relative'
        document.querySelector('.over-con').style.top =
        90 - document.documentElement.scrollTop + 'px'
      }
    },
    onLoad() {}
  }
}
</script>

<style scoped lang="less">
.search-head {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #21b97a;
  height: 50px;
  width: 100%;
  padding: 0 10px;
}

::v-deep .van-search {
  width: 300px;
  height: 50px;
  margin: 0 15px;
  padding: 0 1px;
  ::placeholder {
    color: rgb(144, 144, 144);
  }
  .van-search__content {
    padding-left: 5px;
  }
  .van-search__label {
    label {
      padding-right: 10px;
      border-right: 0.5px solid rgb(184, 184, 184);
    }
  }
  .van-field {
    padding-left: 8px;
  }
}
.filter-label {
  width: 100%;
  z-index: 3;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

.icon-local {
  color: white;
}

::v-deep .van-grid-item {
  height: 40px;
}
::v-deep .van-cell {
  padding: 0 15px;
}

.houselist {
  width: 100%;
  position: absolute;
  left: 0;
  top: 92px;
  // padding: 0px 15px;
  // height: 120px;

  .singlehouse {
    display: flex;
    justify-content: left;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    .houseimg {
      img {
        width: 106px;
        height: 80px;
      }
    }
    .houseinfo {
      margin-left: 15px;
      padding-top: 10px;
      h3 {
        font-size: 15px;
        color: #394043;
        line-height: 22px;
        font-family: Microsoft YaHei;
      }
      p {
        font-size: 12px;
        color: #afb2b3;
      }
      .hao {
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
        color: #39becd;
        background: #e1f5f8;
      }
      .price {
        font-size: 12px;
        color: #fa5741;
        line-height: 23px;
        span {
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
  }
}

.van-overlay {
  .over-con {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
  }
  .mask-bottom {
    display: flex;
    align-items: center;
    // height: 50px;
    width: 100%;
    font-size: 18px;
    border-top: 1px solid rgb(177, 177, 177);
    .cancel {
      flex: 1;
      height: 50px;
      background-color: #fff;
      color:#21b97a;
    }
    .confirm {
      flex: 2;
      height: 50px;
      background-color: #21b97a;
      color: white;
    }
  }
}
</style>
